import { Input, Select, Table, Tooltip, TreeSelect } from 'antd';
import Cls from 'classnames';
import { useEffect, useState } from 'react';
import { connect } from 'umi';
import { DetailedServices, positionList } from '../services';
import pageStyles from '@/common/pageLayout.less';
import { getLevelZeroJson, getLoadMapList, getSelectDataMapList, getTenantID } from '@/utils';
import { getUserDataList } from '@/components/SchemaComponent/SchemaManage/hooks';
import { ILoadMapTypeAll } from '@/common';

const DifferTable = ({ curRes, datalist, saveList, arrayList }) => {
  const styleFixCls = 'contract-styfixcls-';
  const { DetailPushRun, Detaildata, getDetailReload, taskPushPagination, reloadRequest, taskPushLoading } = DetailedServices(curRes);

  const { loadMapInfo, mapLoading } = getLoadMapList([
    `${getTenantID()}${ILoadMapTypeAll.ASSET_AREA}`, //资产类型
  ]);

  /** 资产存放区域类型 */
  const locationList = getSelectDataMapList(loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.ASSET_AREA}`], 'name', 'id', true);

  const { positionRun, positiondata } = positionList();
  /**获取用户接口 */
  const { getUserRun, getUserLoading, getUserList } = getUserDataList();

  useEffect(() => {
    if (datalist?.id) {
      const obj: any = {
        inventoryID: datalist.id,
        page: 1,
        rows: 10,
      };
      DetailPushRun(obj);
    }
  }, [datalist]);

  const columns = [
    {
      title: '盘点前',
      children: [
        {
          title: '资产编码',
          dataIndex: 'assetID',
          key: 'assetID',
          visible: true,
          width: 150,
          unDrag: false,
          render: (text: string | null, record: Record<string, any>) => {
            return (
              <Tooltip title={text} placement="top">
                <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
                  {text ? text : '--'}
                </span>
              </Tooltip>
            );
          },
        },
        {
          title: '资产名称',
          dataIndex: 'assetName',
          key: 'assetName',
          visible: true,
          width: 150,
          unDrag: false,
          render: (text: string | null, record: Record<string, any>) => {
            return (
              <Tooltip title={text} placement="top">
                <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
                  {text ? text : '--'}
                </span>
              </Tooltip>
            );
          },
        },
        {
          title: '盘点状态',
          dataIndex: 'isInventory',
          key: 'isInventory',
          visible: true,
          width: 150,
          unDrag: false,
          render: (text: string | null, record: Record<string, any>) => {
            return (
              <Tooltip title={text} placement="top">
                <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
                  {text ? text : '--'}
                </span>
              </Tooltip>
            );
          },
        },
        {
          title: '盘点结果',
          dataIndex: 'inventoryTypeName',
          key: 'inventoryTypeName',
          visible: true,
          width: 150,
          unDrag: false,
          render: (text: string | null, record: Record<string, any>) => {
            return (
              <Tooltip title={text} placement="top">
                <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
                  {text ? text : '--'}
                </span>
              </Tooltip>
            );
          },
        },
        {
          title: '存放地点',
          dataIndex: 'location',
          key: 'location',
          visible: true,
          width: 150,
          unDrag: false,
          render: (text: string | null, record: Record<string, any>) => {
            return (
              <Tooltip title={text} placement="top">
                <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
                  {text ? text : '--'}
                </span>
              </Tooltip>
            );
          },
        },
        {
          title: '规格型号（参数）',
          dataIndex: 'brandParam',
          key: 'brandParam',
          visible: true,
          width: 150,
          unDrag: false,
          render: (text: string | null, record: Record<string, any>) => {
            return (
              <Tooltip title={text} placement="top">
                <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
                  {text ? text : '--'}
                </span>
              </Tooltip>
            );
          },
        },
        {
          title: '存放地点',
          dataIndex: 'location',
          key: 'location',
          visible: true,
          width: 150,
          unDrag: false,
          render: (text: string | null, record: Record<string, any>) => {
            return (
              <Tooltip title={text} placement="top">
                <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
                  {text ? text : '--'}
                </span>
              </Tooltip>
            );
          },
        },
        {
          title: '盘点数量',
          dataIndex: 'inventoryedNum',
          key: 'inventoryedNum',
          visible: true,
          width: 150,
          unDrag: false,
          render: (text: string | null, record: Record<string, any>) => {
            return (
              <Tooltip title={text} placement="top">
                <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
                  {text ? text : '--'}
                </span>
              </Tooltip>
            );
          },
        },
        {
          title: '使用部门',
          dataIndex: 'useDepartmentName',
          key: 'useDepartmentName',
          visible: true,
          width: 150,
          unDrag: false,
          render: (text: string | null, record: Record<string, any>) => {
            return (
              <Tooltip title={text} placement="top">
                <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
                  {text ? text : '--'}
                </span>
              </Tooltip>
            );
          },
        },
        {
          title: '使用岗位',
          dataIndex: 'usePositionName',
          key: 'usePositionName',
          visible: true,
          width: 150,
          unDrag: false,
          render: (text: string | null, record: Record<string, any>) => {
            return (
              <Tooltip title={text} placement="top">
                <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
                  {text ? text : '--'}
                </span>
              </Tooltip>
            );
          },
        },
        {
          title: '使用人',
          dataIndex: 'userName',
          key: 'userName',
          visible: true,
          width: 150,
          unDrag: false,
          render: (text: string | null, record: Record<string, any>) => {
            return (
              <Tooltip title={text} placement="top">
                <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
                  {text ? text : '--'}
                </span>
              </Tooltip>
            );
          },
        },
        {
          title: '盘点图片',
          dataIndex: 'userName',
          key: 'userName',
          visible: true,
          width: 150,
          unDrag: false,
          // render: (text: string | null, record: Record<string, any>) => {
          //     return (
          //       <Tooltip title={text} placement="top">
          //         <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
          //           {text ? text : '--'}
          //         </span>
          //       </Tooltip>
          //     );
          //   },
        },
        {
          title: '盘点后规格型号',
          dataIndex: 'changeBrandParam',
          key: 'changeBrandParam',
          visible: true,
          width: 150,
          unDrag: false,
          render: (value: number | any, record: Record<string, any>, index: number) => {
            return (
              <Input
                defaultValue={value}
                bordered={false}
                style={{ width: '100%' }}
                onBlur={(val) => {
                  record.changeBrandParam = val.target.value;
                  saveList(record);
                }}
              />
            );
          },
        },
      ],
    },
    {
      title: '盘点后',
      children: [
        {
          title: '盘点后存放地点',
          dataIndex: 'changeLocation',
          key: 'changeLocation',
          visible: true,
          width: 150,
          unDrag: false,
          render: (value: number | any, record: Record<string, any>, index: number) => {
            return (
              <TreeSelect
                showSearch
                style={{
                  width: '100%',
                }}
                defaultValue={value}
                dropdownStyle={{
                  maxHeight: 400,
                  overflow: 'auto',
                }}
                fieldNames={{
                  label: 'name',
                  value: 'id',
                  children: 'children',
                }}
                placeholder="请选择"
                allowClear
                treeDefaultExpandAll
                onChange={(value) => {
                  if (value) {
                    record.changeLocation = value;
                    saveList(record);
                  }
                }}
                treeData={locationList}
              />
            );
          },
        },
        {
          title: '盘点后数量',
          dataIndex: 'changeQuantityOrArea',
          key: 'changeQuantityOrArea',
          visible: true,
          width: 150,
          unDrag: false,
          render: (value: number | any, record: Record<string, any>, index: number) => {
            return (
              <Input
                defaultValue={value}
                bordered={false}
                style={{ width: '100%' }}
                onBlur={(val) => {
                  record.changeQuantityOrArea = val.target.value;
                  saveList(record);
                }}
              />
            );
          },
        },
        {
          title: '盘点后使用部门',
          dataIndex: 'changeUseDepartmentID',
          key: 'changeUseDepartmentID',
          visible: true,
          width: 150,
          unDrag: false,
          render: (value: number | any, record: Record<string, any>, index: number) => {
            // if(record?.changeUseDepartmentID){
            //   const obj: any = {
            //     id: value,
            //   };
            //   positionRun(obj);
            //   getUserRun({ userDepartmentID: value });
            // }
            return (
              <TreeSelect
                showSearch
                style={{
                  width: '100%',
                }}
                defaultValue={value}
                dropdownStyle={{
                  maxHeight: 400,
                  overflow: 'auto',
                }}
                fieldNames={{
                  label: 'text',
                  value: 'id',
                  children: 'children',
                }}
                placeholder="请选择"
                allowClear
                treeDefaultExpandAll
                onChange={(value) => {
                  if (value) {
                    const obj: any = {
                      id: value,
                    };
                    positionRun(obj);
                    record.changeUseDepartmentID = value;
                    saveList(record);
                    getUserRun({ userDepartmentID: value });
                  }
                }}
                treeData={getLevelZeroJson()}
              />
            );
          },
        },
        {
          title: '盘点后使用岗位',
          dataIndex: 'changeUsePositionID',
          key: 'changeUsePositionID',
          visible: true,
          width: 150,
          unDrag: false,
          render: (value: number | any, record: Record<string, any>, index: number) => {
            return (
              <Select
                fieldNames={{
                  label: 'name',
                  value: 'id',
                }}
                style={{
                  width: '100%',
                }}
                defaultValue={record.changeUsePositionName}
                onChange={(value) => {
                  record.changeUsePositionID = value;
                  saveList(record);
                }}
                onFocus={() => {
                  const obj: any = {
                    id: record.changeUseDepartmentID,
                  };
                  positionRun(obj);
                }}
                options={positiondata?.obj}
              />
            );
          },
        },
        {
          title: '盘点后使用人',
          dataIndex: 'changeUserID',
          key: 'changeUserID',
          visible: true,
          width: 150,
          unDrag: false,
          render: (value: number | any, record: Record<string, any>, index: number) => {
            return (
              <Select
                fieldNames={{
                  label: 'realName',
                  value: 'id',
                }}
                style={{
                  width: '100%',
                }}
                defaultValue={record.changeUserName}
                onChange={(value) => {
                  record.changeUserID = value;
                  saveList(record);
                }}
                onFocus={() => {
                  getUserRun({ userDepartmentID: record.changeUseDepartmentID });
                }}
                options={getUserList}
              />
            );
          },
        },
        {
          title: '盘盈/盘亏原因',
          dataIndex: 'inventoryRemark',
          key: 'inventoryRemark',
          visible: true,
          width: 150,
          unDrag: false,
          render: (value: number | any, record: Record<string, any>, index: number) => {
            return (
              <Input
                defaultValue={value}
                bordered={false}
                style={{ width: '100%' }}
                onBlur={(val) => {
                  record.inventoryRemark = val.target.value;
                  saveList(record);
                }}
              />
            );
          },
        },
        {
          title: '备注',
          dataIndex: 'remark',
          key: 'remark',
          visible: true,
          width: 150,
          unDrag: false,
          render: (value: number | any, record: Record<string, any>, index: number) => {
            return (
              <Input
                defaultValue={value}
                bordered={false}
                style={{ width: '100%' }}
                onBlur={(val) => {
                  record.remark = val.target.value;
                  saveList(record);
                }}
              />
            );
          },
        },
      ],
    },
  ];

  return (
    <div className={Cls('list-table', `${styleFixCls}updateStepsBox-tableBox`, 'ExtractModalTable')}>
      <Table
        size="small"
        bordered
        scroll={{ x: 1200, y: 'true' }}
        columns={columns}
        dataSource={Detaildata?.rows}
        rowKey={'id'}
        loading={taskPushLoading}
        pagination={{
          ...taskPushPagination,
          showTotal: () => {
            return '共' + Detaildata?.total + '条';
          },
        }}
      />
    </div>
  );
};

export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
  navTab,
}))(DifferTable);
